<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>Simple example - Editor.md examples</title>
        <link rel="stylesheet" href="${ctxPath }/js/system/editor.md/css/style.css" />
        <link rel="stylesheet" href="${ctxPath }/js/system/editor.md/css/editormd.css" />
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>Simple example</h1>
            </header>
            <div id="test-editormd">
<!-- 内容开始 -->
                <textarea style="display:none;">
[TOCM]

[TOC]

 #### Disabled options
![](https://img.shields.io/badge/release-1.2.3-blue.svg)
- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

       editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/     
            editormd.js
            ...

```html
<!-- English -->
<script src="../dist/js/languages/en.js"></script>

<!-- 繁體中文 -->
<script src="../dist/js/languages/zh-tw.js"></script>
```

				</textarea>
<!-- 内容结束 -->
            </div>
        </div>
        <script src="${ctxPath }/js/lib/jquery-1.10.2.min.js"></script>
        <script src="${ctxPath }/js/system/editor.md/editormd.min.js"></script>
        <script type="text/javascript">
			var testEditor;

            $(function() {
                testEditor = editormd("test-editormd", { //注意1：这里的就是上面的DIV的id属性值
                    tocm: true //设置可以添加目录，只需要在上面一行输入 [TOCM]，就会有目录，注意下面要空一行
                    ,width   : "90%"
                    ,height  : 640
                    ,syncScrolling : "single"
                    ,path    : "${ctxPath }/js/system/editor.md/lib/" //注意2：你的路径
                    ,saveHTMLToTextarea : true //注意3：这个配置，方便post提交表单
                    
                    //,emoji   : true //emoji表情，默认关闭
                    //,taskList: true
                    //,tex: true // 开启科学公式TeX语言支持，默认关闭
                    //,flowChart: true //开启流程图支持，默认关闭
                    //,sequenceDiagram: true //开启时序/序列图支持，默认关闭,

                    //,dialogLockScreen : false //设置弹出层对话框不锁屏，全局通用，默认为true
                    //,dialogShowMask : false //设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                    //,dialogDraggable : false //设置弹出层对话框不可拖动，全局通用，默认为true
                    ,dialogMaskOpacity : 0.4 //设置透明遮罩层的透明度，全局通用，默认值为0.1
                    ,dialogMaskBgColor : "#000" //设置透明遮罩层的背景颜色，全局通用，默认为#fff

                    /**上传图片相关配置如下*/
                    ,imageUpload : true
                    ,imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"]
                   	,imageUploadURL : "${ctxPath }/upload/editormdPic/"//后端的上传图片服务地址，注意需要自己实现
                   	// 图片返回格式
                   	/* {
                   	    success : 0 | 1, //0表示上传失败;1表示上传成功
                   	    message : "提示的信息",
                   	    url     : "图片地址" //上传成功时才返回
                   	} */
                   	/*上传图片成功后可以做一些自己的处理*/
                    ,onload: function () {
                    	// 超链接改为新页面打开
						$('a[href^="http"]').each(function(i, n){
							var $this = $(n);
							var target = $this.attr("target");
							if(!target){
								$this.attr("target", "_blank");
							}
						});
                        //console.log('onload', this);
                        //this.fullscreen();
                        //this.unwatch();
                        //this.watch().fullscreen();
                        //this.width("100%");
                        //this.height(480);
                        //this.resize("100%", 640);
                    }
                    
                   	/**设置主题颜色*/
                    ,editorTheme: "pastel-on-dark"
                    ,theme: "dark"
                    ,previewTheme: "dark"
                    
                });
                
                /*
                // or
                testEditor = editormd({
                    id      : "test-editormd",
                    width   : "90%",
                    height  : 640,
                    path    : "../lib/"
                });
                */
            });
        </script>
    </body>
</html>
